<template>
  <div class="page-login">
    <van-nav-bar
      title="登录"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />

    <van-form @submit="store.submit($route)">
      <van-cell-group inset>
        <van-field
          v-model="username"
          placeholder="请输入手机号码"
          maxlength="11"
          :rules="[{ required: true, message: '请输入手机号码' }]"
        />
        <van-field
          v-model="password"
          type="password"
          placeholder="请输入密码"
          maxlength="5"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          :disabled="isDisabled"
          round
          block
          type="primary"
          native-type="submit"
        >
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useUserStore } from "@/stores/user";

const store = useUserStore();
const { username, password, isDisabled } = storeToRefs(store);
</script>
